<template>
  <div class="box">
    <!-- <p>{{ typeof num }}:{{ num }}</p> -->
    <div class="input">
      <button type="button" @click="setNum(-1)">
        <svg
          t="1761205939350"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="8730"
          width="12"
          height="12"
        >
          <path
            d="M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"
            p-id="8731"
          ></path>
          <path
            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
            p-id="8732"
          ></path>
        </svg>
      </button>
      <!-- <input type="text" v-model.number="newNum" @change="checkNum()" /> -->
      <input type="text" v-model.number="newNum" />
      <button type="button" @click="setNum(+1)">
        <svg
          t="1761205795255"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="8576"
          width="12"
          height="12"
        >
          <path
            d="M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"
            p-id="8577"
          ></path>
          <path
            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
            p-id="8578"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  // props 中的变量名和 data 的变量名 不能重复的
  props: {
    // props 的数据是只读的
    num: {
      type: Number,
    },
  },
  data() {
    return {
      // num: 10,
    };
  },
  computed: {
    // 计算属性默认是只读的，但可以通过配置改变为可读可写
    // 通过计算属性返回 props的数据
    // newNum: function () {
    //   return this.num;
    // },
    newNum: {
      get() {
        return this.num;
      },
      set(nv) {
        // console.log(nv);
        // vue 提供了一个 this.$emit 函数 => 触发子组件标签上绑定的自定义事件
        //                              => 并携带数据
        if (typeof nv == "number") {
          this.$emit("update", nv);
        }
        // else {
        //   this.$emit("update", this.num);
        // }
      },
    },
  },
  methods: {
    // checkNum() {
    //   if (typeof this.num != "number") {
    //     // this.num = 1;
    //   }
    // },
    setNum(arg) {
      // this.num += arg;
      // // vue 提供了一个 this.$emit 函数 => 触发子组件标签上绑定的自定义事件
      // this.$emit("update");
      this.newNum += arg;
    },
  },
};
</script>

<style scoped>
.box {
  display: inline-block;
}
.input {
  border: 1px solid #999;
  display: flex;
  flex-flow: row nowrap;
  border-radius: 8px;
  overflow: hidden;
  height: 30px;
  box-sizing: border-box;
}
.input > button {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background-color: #efefef;
  height: 30px;
  box-sizing: border-box;
}
.input > button:active {
  background-color: #aaaaaa;
}
.input > input {
  width: 60px;
  height: 30px;
  border: none;
  outline: none;
  text-align: center;
  line-height: 30px;
  box-sizing: border-box;
}
</style>
